<template>
  <node-common
    title="分类器"
    iconName="classifier-node"
    :isSelected="isSelected"
    :isHovered="isHovered"
    :model="model"
    :menus="menus"
    @handleMenu="handleMenu"
  >
    <div class="content">
      <div class="classifier-node-content">
        <div v-for="(item, index) in properties?.options.categories" class="case-item">
          <div class="case-header">
            <div>分类{{ index + 1 }}</div>
          </div>
          <div class="case-category">
            <div>{{ item.category || '-' }}</div>
          </div>
        </div>
        <div class="case-item">
          <div class="case-header">
            <div>ELSE</div>
          </div>
          <div class="case-category">
            <div>无分类</div>
          </div>
        </div>
      </div>
       <div class="ellipsis" style="font-size: 12px;color:#666;">{{ getRemarks }}</div>
    </div>
  </node-common>
</template>

<script setup>
import { ref, onMounted, reactive, watch,computed } from 'vue';
import NodeCommon from '../base-node.vue';
const props = defineProps({
  model: {
    type: Object,
    default: () => ({})
  },
  graphModel: {
    type: Object,
    default: () => ({})
  },
  properties: {
    type: Object,
    default: null
  },
  isHovered: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});

const menus = ref([{ name: '删除', key: 'delete', color: '#fb363f' }]);
const handleMenu = item => {
  if (item.key === 'delete') {
    props.graphModel.deleteNode(props.model.id);
  }
};
const getRemarks = computed(() => {

  return props.properties?.remarks;
});
</script>
<style  lang='less' scoped>
.classifier-node-content .case-item {
  text-align: right;
  color: #333;
}
 .classifier-node-content .case-item:last-child {
  margin-bottom: 0;
}
 .classifier-node-content .case-item .case-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
 .classifier-node-content .case-item .case-header > div {
  flex: 1;
  font-weight: 700;
  color: #333;
  text-align: right;
}
 .classifier-node-content .case-item .case-category {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
 .classifier-node-content .case-item .case-category > div {
  flex: 1;
  color: #999;
  text-align: right;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>